@import './base.css';

:root {
  /* Light Theme */
  --color-background: #ffffff;
  --color-background-soft: #f9f9f9;
  --color-background-mute: #f1f1f1;

  --color-border: #e2e2e2;
  --color-border-hover: #c9c9c9;

  --color-heading: #222222;
  --color-text: #333333;
  --color-text-mute: #666666;

  --color-primary: #007bff;
  --color-primary-hover: #0056b3;
}

body.dark-mode {
  /* Dark Theme */
  --color-background: #1a1a1a;
  --color-background-soft: #252525;
  --color-background-mute: #333333;

  --color-border: #444444;
  --color-border-hover: #555555;

  --color-heading: #e0e0e0;
  --color-text: #cccccc;
  --color-text-mute: #999999;
  
  --color-primary: #1abc9c;
  --color-primary-hover: #16a085;
}

/* Global Styles using variables */
body {
  background-color: var(--color-background);
  color: var(--color-text);
  transition: background-color 0.3s, color 0.3s;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
}
